<template>
    <div>
        <top-bar></top-bar>
        <left-bar :datas='data'></left-bar>
        <div class="main">
            <div class="main-mains">
                <div class="main-content">
                    <div class="main-mains-top">
                        图文会议管理
                    </div>
                    <div class="screen clear">
                        <div class="fl" @click="addProject()">新增</div>
                        <div class="fl" @click="screen()">筛选</div>
                    </div>
                    <div class="publicTable toLongTable">
                        <table class="head_table">
                            <tr>
                                <td width="5%">编号</td>
                                <td width='7%'>图文会议名称</td>
                                <td width='5%'>主讲医生</td>
                                <td width='6%'>相关科室</td>
                                <td width='8%'>医院</td>
                                <td width='8%'>发布时间</td>
                                <td width='7%'>状态</td>
                                <td width='8%'>开始时间</td>
                                <td width='8%'>结束时间</td>
                                <td width='12%'>操作</td>
                            </tr>
                        </table>
                        <el-scrollbar>
                            <table class="content_table">
                                <tr v-for="(item,index) in listData" :key="index" :class="{active:index%2==1}">
                                    <td width="5%">{{item.id}}</td>
                                    <td width='7%'>{{item.title}}</td>
                                    <td width='5%'>{{item.speaker}}</td>
                                    <td width='6%'>{{getDepartment(item.speaker_department)}}</td>
                                    <td width='8%'>
                                        {{getHospital(item.speaker_hospital)}}
                                    </td>
                                    <td width='8%'>
                                        {{item.create_time}}
                                    </td>
                                    <td width='7%'>
                                        {{item.status | statusType}}
                                    </td>
                                    <td width='8%'>
                                        {{item.begin_time}}
                                    </td>
                                    <td width='8%'>
                                        {{item.end_time}}
                                    </td>
                                    <td width='12%' class="operation">
                                        <span class="active" @click="edit(item.id)">编辑</span>
                                        <span class="active" @click="stopMeeting(item.id)" v-if="item.status==1">暂停</span>
                                        <span class="active" @click="startMeeting(item.id)" v-if="item.status==3">开启</span>
                                        <span class="active" @click="preview(item.id)">预览</span>
                                        <span class="active" @click="getDetails(item.id)">查看详情</span>
                                        <span class="active" @click="removeMeeting(item.id)">删除</span>
                                    </td>
                                </tr>
                            </table>
                        </el-scrollbar>
                    </div>
                    <div class="nodataTip" v-if="showNodataTip">
                        <i class="iconfont icon-zanwuneirong"></i>
                        <h5>暂无内容</h5>
                    </div>
                    <div class="orderBotom">
                        <div class="orderBotomRight">
                            <el-pagination @current-change="handleCurrentChange" :page-size="15" layout="total, prev, pager, next" :total='totalnum'>
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </div>
            <div class="system-menban" v-if="search">
            </div>
            <div class="systemPopup" v-if="search">
                <div class="topTitle">
                    <span>筛选</span>
                    <i class="el-icon-close system-icon" @click="hideSystemPopup"></i>
                </div>
                <div class="systemPopup-con">
                    <div class="systemPopup-cons clear">
                        <div class="fl">时间</div>
                        <div class="fl sel">
                            <el-date-picker v-model="time" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                            </el-date-picker>
                        </div>
                    </div>
                    <div class="systemPopup-cons clear">
                        <div class="fl">关键词搜索</div>
                        <div class="fl sel">
                            <el-input placeholder="请输入会议名称/主讲医生姓名" v-model.trim="keyword" clearable>
                            </el-input>
                        </div>
                    </div>
                    <div class="systemPopup-btn clear">
                        <div class="fl" @click="searchs()">确认</div>
                        <div class="fl" @click="hideSystemPopup">取消</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
import leftBar from "@/components/leftBar";
import topBar from "@/components/topBar";
import teletext from "@/api/teletext";
import pubilc from "@/api/pubilc";

export default {
  components: {
    leftBar,
    topBar
  },
  data() {
    return {
      data: "teletextConference",
      pages: 1,
      listData: [],
      name: "",
      business: "",
      totalnum: 0,
      showNodataTip: false,
      search: false,
      keyword: "",
      time: [],
      departmentOptions: [],
      hospitalOptions: [],
      hospitalPage: 1
    };
  },
  methods: {
    getHospitalList() {
      const options = {
        page: this.hospitalPage
      };
      pubilc.getHospitalList(options).then(res => {
        if (res.code == 1) {
          this.hospitalOptions = this.hospitalOptions.concat(res.data.list);
          if (res.data.total == 15) {
            this.hospitalPage++;
            this.getHospitalList();
          }
        }
      });
    },
    getHospital(value) {
      let hospital;
      for (let i = 0; i < this.hospitalOptions.length; i++) {
        if (value == this.hospitalOptions[i].id) {
          hospital = this.hospitalOptions[i].name;
        }
      }
      return hospital;
    },
    getDeparList() {
      const options = {};
      pubilc.getDepartmentList(options).then(res => {
        if (res.code == 1) {
          this.departmentOptions = res.data.list;
        }
      });
    },
    getDepartment(value) {
      let department;
      for (let i = 0; i < this.departmentOptions.length; i++) {
        if (value == this.departmentOptions[i].id) {
          department = this.departmentOptions[i].name;
        }
      }
      return department;
    },

    edit(id) {
      this.$router.push("/editteletext?id=" + id);
    },
    preview(id) {
      this.$router.push("/teletextPhone?id=" + id);
    },
    removeMeeting(id) {
      //删除会议
      this.$confirm("此操作将删除该会议, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          const options = {};
          teletext.deleteTeletext(options, id).then(res => {
            if (res.code == 1) {
              this.$message({
                showClose: true,
                message: "删除会议成功！",
                type: "success"
              });
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    stopMeeting(id) {
      //暂停会议
      this.$confirm("此操作将暂停该会议, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          const options = {};
          teletext.stopTeletext(options, id).then(res => {
            if (res.code == 1) {
              this.$message({
                showClose: true,
                message: "暂停会议成功！",
                type: "success"
              });
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    startMeeting(id) {
      //开启会议
      this.$confirm("此操作将开启该会议, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          const options = {};
          teletext.startTeletext(options, id).then(res => {
            if (res.code == 1) {
              this.$message({
                showClose: true,
                message: "开启会议成功！",
                type: "success"
              });
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    getDetails(id) {
      this.$router.push("/teletextDetails?id=" + id);
    },
    searchs() {
      this.pages = 1;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pages = val;
      this.getList();
    },
    getList() {
      this.showNodataTip = false;
      let options;
      if (this.time == "" || this.time == null) {
        options = {
          page: this.pages,
          begin_time: "",
          end_time: "",
          keyword: this.keyword
        };
      } else {
        options = {
          page: this.pages,
          begin_time: this.time[0],
          end_time: this.time[1],
          keyword: this.keyword
        };
      }
      teletext.getList(options).then(res => {
        if (res.code == 1) {
          this.search = false;
          this.listData = res.data.data;
          this.totalnum = res.data.total;
          if (!res.data.total) {
            this.showNodataTip = true;
          }
        }
      });
    },
    addProject() {
      this.$router.push("/addTeletext");
    },
    screen() {
      this.search = true;
    },
    hideSystemPopup() {
      this.showSystemPopup = false;
      this.search = false;
    }
  },
  mounted() {
    this.getHospitalList();
    this.getDeparList();
    this.getList();
  },
  filters: {
    times(value) {
      var time = new Date(value * 1000);
      var month =
        time.getMonth() + 1 > 9
          ? time.getMonth() + 1
          : "0" + (time.getMonth() + 1);
      var data = time.getDate() > 9 ? time.getDate() : "0" + time.getDate();
      var hour = time.getHours() > 9 ? time.getHours() : "0" + time.getHours();
      var minutes =
        time.getMinutes() > 9 ? time.getMinutes() : "0" + time.getMinutes();
      var second =
        time.getSeconds() > 9 ? time.getSeconds() : "0" + time.getSeconds();
      var times =
        time.getFullYear() +
        "-" +
        month +
        "-" +
        data +
        " " +
        hour +
        ":" +
        minutes +
        ":" +
        second;
      return times;
    },
    statusType(value) {
      let type;
      if (value == 0) {
        type = "未开始";
      } else if (value == 1) {
        type = "进行中";
      } else if (value == 2) {
        type = "已结束";
      } else if (value == 3) {
        type = "已暂停";
      } else if (value == -1) {
        type = "已删除";
      }
      return type;
    }
  }
};
</script>

<style>
</style>
